<template>
	<div class="app-container">
		<el-row class="yd-form-wraper" justify="space-between">
			<el-col :span="6">
				<div class="title-box">
					<div class="circle"></div>
					<div class="title-text">任务执行明细</div>
				</div>
			</el-col>
			<el-col :span="6">
				<el-form :inline="true" :model="searchFormData" style="display: flex">
					<el-form-item style="width: 500px; margin-right: 15px">
						<el-input v-model="searchFormData.taskName" placeholder="请输入任务名称" clearable />
					</el-form-item>
					<el-form-item style="margin-right: 0">
						<el-button plain @click="searchHandler">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<YdTable
			:formData="searchFormData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="searchHandler"
			@currentChangeHandler="getList"
			@sortChangeHandler="getList"
		>
		</YdTable>
		<el-row class="yd-form-wraper" justify="space-between">
			<el-col :span="6">
				<div class="title-box">
					<div class="circle"></div>
					<div class="title-text">执行中的任务</div>
				</div>
			</el-col>
			<el-col :span="6">
				<el-form :inline="true" :model="searchFormData2" style="display: flex">
					<el-form-item style="width: 500px; margin-right: 15px">
						<el-input v-model="searchFormData2.taskName" placeholder="请输入任务名称" clearable />
					</el-form-item>
					<el-form-item style="margin-right: 0">
						<el-button plain @click="searchHandler2">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<YdTable
			:formData="searchFormData2"
			:tableConfig="tableConfig2"
			:tableData="tableData2"
			@sizeChangeHandler="searchHandler2"
			@currentChangeHandler="getList2"
			@sortChangeHandler="getList2"
		>
		</YdTable>
	</div>
</template>
<script lang="tsx" name="operateMonitor" setup>
import { ref, reactive, toRefs, onMounted, onActivated } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useCurrentInstance from '@/utils/useCurrentInstance';
import { getTaskLogList, getRunningTaskList } from '@/api/ops-workbench/timeSchedule/operateMonitor';
const { proxy } = useCurrentInstance();
const router = useRouter();
const route = useRoute();
// 任务名称
let taskName = ref('');
let searchFormData = reactive<anyObj>({
	taskName: taskName.value,
	pageNum: 1,
	pageSize: 10,
});
const tableData = ref([
	{
		taskName: 'task',
		taskExecuteStatus: 0,
		taskExecuteType: '>',
		taskExecuteTime: '2022-12-20 12:00:00',
	},
	{
		taskName: 'task',
		taskExecuteStatus: 0,
		taskExecuteType: '>',
		taskExecuteTime: '2022-12-20 12:00:00',
	},
]);
const tableConfig = reactive({
	columns: [
		{
			label: '任务名称',
			prop: 'taskName',
		},
		{
			label: '运行时刻',
			prop: 'taskExecuteTime',
			sortable: true,
		},
		{
			label: '运行类型',
			prop: 'taskExecuteType',
			sortable: true,
		},
		{
			label: '状态',
			prop: 'taskExecuteStatus',
			formatter(row: anyObj, val: number) {
				console.log(row, val);
				if (val === 0) {
					return '异常/失败';
				}
				return '正常';
			},
			sortable: true,
		},
	],
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	loading: false,
});

let searchFormData2 = reactive<anyObj>({
	taskName: taskName.value,
	pageNum: 1,
	pageSize: 10,
});
const tableData2 = ref<anyObj>([
	//
]);
const tableConfig2 = reactive({
	columns: [
		{
			label: '任务名称',
			prop: 'taskName',
		},
		{
			label: '本次执行时间',
			prop: 'taskNextTime',
			sortable: true,
		},
	],
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	loading: false,
});
searchHandler();
function searchHandler() {
	searchFormData.pageNum = 1;
	getList();
}
function getList() {
	// searchFormData.pageNum = 1;
	console.log(searchFormData);
	tableConfig.loading = true;
	getTaskLogList(searchFormData).then((res: ApiResponse) => {
		console.log(res.data, '明细');
		tableConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.error(res.msg);
			return;
		}
		tableData.value = res.data.records;
		tableConfig.pagination!.total = res.data.total;
	});
}
searchHandler2();
function searchHandler2() {
	searchFormData2.pageNum = 1;
	getList2();
}
function getList2() {
	// searchFormData2.pageNum = 1;
	console.log(searchFormData2);
	tableConfig2.loading = true;
	getRunningTaskList(searchFormData2).then((res: ApiResponse) => {
		console.log(res.data, '明细');
		tableConfig2.loading = false;
		if (res.code !== 0) {
			proxy?.$message.error(res.msg);
			return;
		}
		tableData2.value = res.data.records;
		tableConfig2.pagination!.total = res.data.total;
	});
}

onMounted(() => {
	searchHandler();
	searchHandler2();
});
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
	.title-box {
		display: flex;
		align-items: center;
		.title-text {
			font-size: 18px;
			font-weight: bold;
		}
	}
}
</style>
